<template>
  <view class="page over_hidden">
    <view class="btn_flex">
      <view class="btn"
            @click.stop="changeData(1)">数据1</view>
      <view class="btn"
            @click.stop="changeData(2)">数据2</view>
    </view>

    <!-- #ifdef APP-PLUS || H5 -->
    <view :id="option.id"
          :option="option"
          :treeDom="treeDom"
          :change:treeDom="treeGraph.changeTreeGraphSize"
          :change:option="treeGraph.changeTreeGraphData"
          style="width: 100%;height: 100%;over"></view>
    <!-- #endif -->
    <!-- #ifndef APP-PLUS || H5 -->
    <view>非 APP、H5 环境不支持</view>
    <!-- #endif -->
  </view>
</template>

<script>
import treeData1 from "./data1";
import treeData2 from "./data2";
export default {
  data() {
    return {
      option: {
        id: "canvasId",
        data: treeData1,
      },
      treeDom: {
        width: 375,
        height: 500,
      },
    };
  },
  mounted() {
    uni
      .createSelectorQuery()
      .select("#canvasId")
      .boundingClientRect((data) => {
        this.treeDom = data;
      })
      .exec();
  },
  methods: {
    changeData(type) {
      if (type === 1) {
        this.option.data = treeData1;
      } else {
        this.option.data = treeData2;
      }
    },
  },
};
</script>

<script module="treeGraph" lang="renderjs">
import F6 from '@/static/js/F6/f6.min.js'
import TreeGraph from '@/static/js/F6/extends/graph/treeGraph.js'
F6.registerGraph('TreeGraph', TreeGraph)

export default {
  data() {
    return {
      graph: null,  
    }
  },  
  mounted() {
    // if (typeof window.F6 === 'function') {
      this.init()
    // } else {
    	// 动态引入较大类库避免影响页面展示
    	// const script = document.createElement('script')
    	// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
    	// script.src = 'https://gw.alipayobjects.com/os/antv/pkg/_antv.f6-{$version}/dist/f6.js'
    	// script.onload = this.init.bind(this)
    	// document.head.appendChild(script)
    // }
  },
  methods: {
    init() {
      console.log('init')  
      this.graph = new F6.TreeGraph({
        container: this.option.id,
        width: this.treeDom.width,
        height: this.treeDom.height,
        animate: true,
        fitView: true, // 画布自适应
        fitCenter: true, //图将会被平移，图的中心将对齐到画布中心，但不缩放。优先级低于 fitView。
        linkCenter: true, //指定边是否连入节点的中心
        modes: {
          default: ['drag-canvas', 'zoom-canvas',
          {
              type: 'collapse-expand',
              onChange: function onChange(item, collapsed) {
                const model = item.getModel();
                model.collapsed = collapsed;
                return true;
              },
            },
          ]
        },
        defaultNode: {
          size: 26,
          anchorPoints: [
            [0, 0.5],
            [1, 0.5],
          ],
        },
        defaultEdge: {
          type: 'cubic-horizontal',
        },
        layout: {
          type: 'dendrogram',
          direction: 'LR',
          nodeSep: 30,
          rankSep: 100,
          getId: function getId(d) {
            return d.id;
          },
          getHeight: function getHeight() {
            return 16;
          },
          getWidth: function getWidth() {
            return 16;
          },
          getVGap: function getVGap() {
            return 10;
          },
          getHGap: function getHGap() {
            return 100;
          },
        },
      })
      this.graph.data(this.option.data);
      this.graph.render(); 
    },
    changeTreeGraphSize() { 
      this.graph.changeSize(this.treeDom.width, this.treeDom.height)
      this.graph.render(); 
      this.graph.fitView()
    },
    changeTreeGraphData() {
      this.graph.changeData(this.option.data)
      this.graph.fitView()
    }
  }
}
</script>
<style lang="scss" scoped>
.btn_flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding: 20rpx;
  .btn {
    padding: 10rpx 20rpx;
    background-color: #293ed4;
    border-radius: 10rpx;
    font-size: 24rpx;
    color: #fff;
    margin-left: 10rpx;
    margin-bottom: 10rpx;
  }
}
</style>
